<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>商品信息</title>
    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <!--top icon-->
    <link rel="shortcut icon" th:href="@{/ChongYouIcon.ico}" type="image/x-icon"/>
    <!-- Custom styles for this template -->
    <link th:href="@{/css/dashboard.css}" rel="stylesheet">
    <style type="text/css">
        /* Chart.js */

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
        /* 在您的CSS样式文件中 */
        .table-responsive {
            max-height: 450px; /* 设置最大高度，可根据需要调整 */
            overflow-y: auto; /* 启用垂直滚动条 */
        }

        #dynamic-table {
            width: 100%; /* 设置表格宽度 */
        }

        #dynamic-table th, #dynamic-table td {
            white-space: nowrap; /* 防止内容换行 */
        }
        .form-container {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .form-group input{
            width: 100%;
        }
        .form-group label {
            flex: 1;
            margin-right: 10px;
        }
    </style>
    <script>function show(id) {
        let div = document.getElementById(id);
        div.style.visibility="visible";
        div.style.display="block";
    }
    </script>
</head>

<body>
<!--导航栏-->
<div th:replace="~{common/common::topbar}"></div>
<div class="container-fluid">
    <div class="row">
        <!--侧边栏-->
        <div th:replace="~{common/common::sidebar(active='lookupGoods')}"></div>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <div>
            <h2>商品信息</h2></div>

            <div class="table-responsive">
                <table class="table table-striped table-sm" id="dynamic-table">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>商品ID</th>
                        <th>成本价</th>
                        <th>售价</th>
                        <th>备注</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- Data will be dynamically populated here -->
                    </tbody>
                </table>
            </div>
            <hr>
            <h4>修改商品信息</h4>
            <div class="form-container mx-auto">
                <div class="form-content">
                    <form id="update-form" th:action="@{/Goods/update}" method="post">
                        <div class="form-group row">
                            <div class="col-sm-3"  style="padding-right: 50px">
                                <label for="idInput" class="col-form-label">ID</label>
                                <input type="text" class="form-control" id="idInput" placeholder="必填" name="ID">
                            </div>

                            <div class="col-sm-3" style="padding-right: 50px">
                                <label for="CommodityID" class="col-form-label">商品ID</label>
                                <input type="text" class="form-control" id="CommodityID" placeholder="不改则不填" name="CommodityID">
                            </div>

                            <div class="col-sm-3" style="padding-right: 50px">
                                <label for="CostPrice" class="col-form-label">成本价</label>
                                <input type="text" class="form-control" id="CostPrice" placeholder="不改则不填" name="CostPrice">
                            </div>

                            <div class="col-sm-3"  style="padding-right: 50px">
                                <label for="SellingPrice" class="col-form-label">售价</label>
                                <input type="text" class="form-control" id="SellingPrice" placeholder="不改则不填" name="SellingPrice">
                            </div>

                        <div class="col-sm-3"  style="padding-right: 50px">
                                <label for="Remark" class="col-form-label">备注</label>
                                <input type="text" class="form-control" id="Remark" placeholder="不改则不填" name="Remark">
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-sm-12 text-center">
                                <button type="submit" class="btn btn-primary">修改</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <script>
                // Use JavaScript to fetch data and populate the table dynamically
                document.addEventListener('DOMContentLoaded', function () {
                    fetch('http://110.42.229.149:8081/laf/Goods/lookup')
                        .then(response => response.json())
                        .then(data => {
                            const tableBody = document.querySelector('#dynamic-table tbody');
                            data.forEach(item => {
                                const row = document.createElement('tr');
                                row.innerHTML = `
                    <td>${item.id}</td>
                    <td>${item.commodityNumber}</td>
                    <td>${item.costPrice}</td>
                    <td>${item.sellingPrice}</td>
                    <td>${item.name}</td>
                `;
                                tableBody.appendChild(row);
                            });

                            // 搜索逻辑
                            const searchInput = document.querySelector('input[type="text"]');
                            searchInput.addEventListener('input', function () {
                                const searchText = this.value.toLowerCase();
                                const rows = tableBody.querySelectorAll('tr');

                                rows.forEach(row => {
                                    const cells = row.querySelectorAll('td');
                                    let matchFound = false;

                                    cells.forEach(cell => {
                                        const cellText = cell.textContent.toLowerCase();
                                        if (cellText.includes(searchText)) {
                                            // 高亮匹配的文本
                                            cell.innerHTML = cellText.replace(new RegExp(searchText, 'gi'), (match) => {
                                                return `<span class="highlight">${match}</span>`;
                                            });
                                            matchFound = true;
                                        } else {
                                            // 还原非匹配的文本
                                            cell.innerHTML = cellText;
                                        }
                                    });

                                    if (matchFound) {
                                        row.classList.remove('d-none');
                                    } else {
                                        row.classList.add('d-none');
                                    }
                                });
                            });
                        })
                        .catch(error => console.error('Error:', error));
                });


            </script>



        </main>
    </div>

</div>

</body>

</html>